<template>
  <div class="calendar">
    <ul class="calendar-top">
      <li>周次</li>
      <li>月</li>
      <li>日</li>
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li>六</li>
    </ul>
    <ul class="calendar-info">
      <li class="calendar-info-li">
        <ul>
          <li v-for="weekobject in weeks" v-bind:key="weekobject.id">{{ weekobject.name }}</li>
        </ul>
      </li>
      <li class="calendar-info-li">月</li>
      <li class="calendar-info-li">日</li>
      <li class="calendar-info-li">一</li>
      <li class="calendar-info-li">二</li>
      <li class="calendar-info-li">三</li>
      <li class="calendar-info-li">四</li>
      <li class="calendar-info-li">五</li>
      <li class="calendar-info-li">六</li>
    </ul>
  </div>
</template>

<script>
import { getWeeks } from '@/api/semester'

export default {
  name: 'SchoolCalendar',
  data() {
    return {
      weeks: [],
      months: []
    }
  },
  methods: {
    getWeeks() {
      getWeeks().then(res => {
        this.weeks = res.data.weeks
      })
    }
  },
  created() {
    this.getWeeks()
  }
}

</script>

<style scoped>
  .calendar {
    width: 80%;
    max-width: 100%;
    margin: 20px auto;
  }
.calendar-top {
  margin: 0;
  padding: 10px;
  background-color: #5d727d;
  display: flex;
  flex-wrap: wrap;
  color: #FFFFFF;
  justify-content: space-around;
}
  .calendar-top li {
    display: inline-block;
    text-align: center;
  }
  .calendar-info {
    margin: 0;
    padding: 10px;
    background-color: #fdfff8;
    display: flex;
    flex-wrap: wrap;
    color: #050505;
    justify-content: space-around;
  }
  .calendar-info-li {
    display: inline-block;
    text-align: center;
  }
  .calendar-info-li ul {
    margin: 0;
    padding: 0;
  }
  .calendar-info-li li {
    padding-left: 10px;
    padding-top: 10px;
    text-align: left;
    list-style-type: none;
  }
</style>
